<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <div class="lef">
        <i />
        区域设置
      </div>
    </div>
    <div class="quyu clearfix">
      <div class="top">
        <div class="nin clearfix">
          <div class="tetle">
            <div class="tetle_a tet">省/自治区/直辖市</div>
            <div class="tetle_b tet">地级市</div>
            <div class="tetle_c tet">市辖区/县/县级市</div>
          </div>
        </div>
        <div class="grade">
          <div class="grade_a">
            <ul id="a">
              <li v-for="(i,idx) in oneList" :key="idx">{{i}}</li>
            </ul>
          </div>
          <div class="grade_b">
            <ul id="b">
              <li v-for="(m,index) in twoList" :key="index">{{m}}</li>
            </ul>
          </div>
          <div class="grade_c">
            <ul id="fafsd">
              <li v-for="(k,ide) in thereList" :key="ide">{{k}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getQuyudata } from "../../../api/setting.js";
export default {
  data() {
    return {
      oneList: [],
      twoList: [],
      thereList: [],
      setdata: "",
      placeholders: {
        province: "省",
        city: "市",
        area: "区"
      },
      usedList: [],
      xinList: [],
      obj: {},
      ol: ""
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      getQuyudata().then(res => {
        if (res.code === 200) {
          let sheng = res.data[0].NAMES;
          let shi = res.data[1].NAMES;
          let qu = res.data[2].NAMES;
          this.oneList = sheng.split(",");
          this.twoList = shi.split(",");
          this.thereList = qu.split(",");
        }
      });
    },
    list() {
      this.oneList.list.forEach((item, index) => {
        this.twoList.push(item.areaName);
        item.forEach((ite, idx) => {
          this.thereList.push(ite.areaName);
        });
      });
    },

    addData() {
      var weobj = new Object();
      if (this.usedList.area.value.length > 1) {
        weobj.province = this.usedList.province.value;
        weobj.city = this.usedList.city.value;
        weobj.area = this.usedList.area.value;
      }
      this.xinList.push(weobj);
    },
    onSelected(data) {
      this.usedList = data;
    }
  }
};
</script>

<style lang="scss">
.dashboard-container {
  width: 100%;
  overflow-x: auto;
  margin-left: 29px;
  padding-right: 144px;
  .dashboard-text {
    width: 100%;
    overflow-x: auto;
    margin-top: 17px;
    height: 37px;
    margin-bottom: 16px;
    .lef {
      float: left;
      line-height: 37px;
      font-size: 16px;
      font-weight: 900;
      color: #333;
      i {
        float: left;
        margin-top: 8.5px;
        width: 11px;
        height: 20px;
        background: rgba(72, 141, 255, 1);
        border-radius: 4px;
        margin-right: 12px;
      }
    }
    .el-button--primary {
      float: left !important;
      color: #fff;
      background-color: #409eff;
      border-color: #409eff;
    }
    .rig {
      font-size: 14px;
      width: 76px;
      height: 37px;
      text-align: center;
      line-height: 37px;
      background: #488dff;
      border-radius: 4px;
      line-height: 37px;
      float: right;
    }
  }
  // box
  .quyu {
    width: 100%;
    padding: 11px 24px 49px 30px;
    box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.1);
    border-radius: 4px;
    .top {
      // width: 1463px;
      height: 50px;
      margin-bottom: 24px;
      border-bottom: 1px solid rgba(242, 242, 242, 1);
      span {
        float: right;
        display: block;
        width: 165px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border: 1px solid rgba(204, 204, 204, 1);
        border-radius: 4px;
        margin-bottom: 10px;
        font-size: 14px;
        color: #333;
      }
    }
    .grade {
      width: 100%;
      ul {
        padding: 0;
        margin: 0;
        list-style: none;
        li {
          height: 70px;
          line-height: 70px;
        }
      }
      .grade_a {
        float: left;
        width: 33.33%;
        text-align: center;

        font-size: 16px;
        color: #333;
      }
      .grade_b {
        float: left;
        width: 33.33%;
        text-align: center;

        font-size: 16px;
        color: #333;
      }
      .grade_c {
        float: left;
        width: 33.33%;
        text-align: center;

        font-size: 16px;
        color: #333;
      }
    }
    .nin {
      margin: 0;
      padding: 0;

      .tetle {
        width: 100%;
        height: 56px;
        background: rgba(242, 242, 242, 1);
        border-radius: 2px 2px 0px 0px;
        .tet {
          float: left;
          width: 33.33%;
          height: 56px;
          line-height: 56px;
          font-size: 14px;
          color: #333;
        }
        .tetle_a {
          text-align: center;
          // padding-left: 196px;
        }
        .tetle_b {
          text-align: center;

          // padding-left: 177px;
        }
        .tetle_c {
          text-align: center;

          // padding-left: 174px;
        }
      }
      // a
      .grade_a {
        width: 33.33%;
        float: left;
        ul {
          width: 100%;
          float: left;
          list-style: none;
          margin: 0;
          padding: 0;
          li {
            width: 33.33%;
            float: left;
            height: 88px;
            line-height: 88px;
            font-size: 14px;
            color: #333;
            .ten_a {
              display: inline-block;
              width: 100%;
              text-align: center;
              // margin-right: 50px;
            }
          }
        }
        .new_a {
          margin-left: 160px;
          display: block;
          text-align: center;
          float: left;
          line-height: 40px;
          width: 100px;
          height: 40px;
          border: 2px dashed rgba(72, 143, 253, 1);
        }
      }
      // b
      .grade_b {
        width: 33.33%;
        float: left;
        ul {
          width: 487px;
          float: left;
          list-style: none;
          margin: 0;
          padding: 0;
          li {
            height: 88px;
            line-height: 88px;
            font-size: 14px;
            color: #333;
            .ten_c {
              display: inline-block;
              width: 80%;
              text-align: center;
              margin-right: 55px;
            }
          }
        }
        .new_b {
          margin-left: 104px;
          display: block;
          text-align: center;
          float: left;
          line-height: 40px;
          width: 100px;
          height: 40px;
          border: 2px dashed rgba(72, 143, 253, 1);
        }
      }
      // c
      .grade_c {
        width: 33.33%;
        float: left;
        ul {
          width: 487px;
          float: left;
          list-style: none;
          margin: 0;
          padding: 0;
          li {
            height: 88px;
            line-height: 88px;
            font-size: 14px;
            color: #333;
            .ten_e {
              display: inline-block;
              width: 100%;
              text-align: center;
              margin-right: 37px;
            }
          }
        }
        .new_c {
          margin-left: 138px;
          display: block;
          text-align: center;
          float: left;
          line-height: 40px;
          width: 100px;
          height: 40px;
          border: 2px dashed rgba(72, 143, 253, 1);
        }
      }
    }
  }
}
</style>
